<template>
  <div class="view">
    <x-header :left-options="{backText: ''}"
              class="vux-1px-b">余额</x-header>
    <div class="header">
      <p></p>
      <p class="numberr">{{backtotal.toFixed(2)}}</p>
      <p class="addfont">

      </p>
      <div class="btn">
        <button @click="$router.push('myimmediately')">
          <img style="width: .35rem; vertical-align: middle;" src="http://img.zanjl.com/Content/img/image/tixianpng.png">
          <label style="vertical-align: middle;">提现</label>
        </button>
      </div>
    </div>
    <div class="div">
      <tab :scroll-threshold="6"
           active-color="#000000"
           bar-active-color="#000000">
        <tab-item v-for="(item, index) in datetimelist"
                  :key="index"
                  :selected="item.status===postData.status"
                  @on-item-click="tabChanged">{{item.text}}</tab-item>
      </tab>
      <div class="content">
        <div class="mescroll"
             id="automescroll">
          <div class="scroll">
            <div class="panel"
                 v-for="item in data"
                 :key="item.record_id">
              <div class="topup"
                 :formatter="moretype(item.record_rebate_type)">
                <flexbox :gutter="0"
                         wrap="wrap">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo">
                      <label>{{data.typename}}</label>
                    </div>
                  </flexbox-item>
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-1">
                      <!-- 用户信息 -->
                      <label>{{item.true_name}}</label>
                      <br/>
                      <label>{{item.user_mobile}}</label>
                      <label v-if="item.record_rebate_type===3">+</label>
                    </div>
                  </flexbox-item>
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-2">
                      <!-- 时间 -->
                      <label>{{item.record_return_time | formatDate}}</label>
                    </div>
                  </flexbox-item>
                  <flexbox-item :span="12">
                    <div class="flex-demo">
                      <!-- 备注信息 -->
                      <p class="successup">{{item.record_remark}}</p>
                    </div>
                  </flexbox-item>
                  <flexbox-item :span="1/3">
                    <div class="flex-demo">
                      <!-- 余额 -->
                      <label style=" font-size: .1625rem; font-weight: initial;">余：{{item.after_record_integral_sum}}</label>
                    </div>
                  </flexbox-item>
                  <flexbox-item :span="1/3">
                    <div class="flex-demo">

                    </div>
                  </flexbox-item>
                  <flexbox-item :span="1/3">
                    <div class="flex-demo">
                      <!-- 金额 -->
                      <span :class="data.backtypemoney < 0 ? income : income"
                            :formatter="backmoneytype(item.record_integral_sum.toFixed(2))">
                        <img style="width: .15rem;"
                             src="http://img.zanjl.com/Content/img/image/fanliicon.png">
                        <label>{{data.backtypemoney}}</label>
                      </span>
                    </div>
                  </flexbox-item>
                </flexbox>
                </div>
              </div>
            </div>
          <div id="record_noData"></div>
        </div>
        <div v-transfer-dom>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import MeScroll from 'mescroll.js'
import { Tab, TabItem, XHeader, TransferDom, Alert, Flexbox, FlexboxItem } from 'vux'
import { getbackpricerecord } from '@api'
import { mapMutations, mapState } from 'vuex'
import { SET_LOADING } from '@store/type'
import qs from 'qs'
import { formatDate } from '../../../filters/date.js'
export default {
  filters: {
    formatDate (time) {
      var dtime = time.slice(6, 19)
      var date = new Date(parseInt(dtime))
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  components: {
    Tab,
    TabItem,
    XHeader,
    Alert,
    TransferDom,
    Flexbox,
    FlexboxItem
  },
  directives: {
    TransferDom
  },
  data () {
    return {

      backtotal: 0,
      msg: 0,
      datetimelist: [],
      meScroll: null,
      data: [],
      postData: {
        status: null,
        page: 1,
        rows: 10,
        sord: 'desc',
        sidx: 'create_time',
        dateti: null
      },
      isCreate: true,
      income: 'income',
      expend: 'expend'
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    // 返利类型
    moretype (typeno) {
      this.data.typename = ''
      switch (typeno) {
        case 1:
          this.data.typename = '消费'
          break
        case 2:
          this.data.typename = '会员升级'
          break
        case 3:
          this.data.typename = '会员升级+'
          break
        case 4:
          this.data.typename = '商家流水'
          break
        case 5:
          this.data.typename = '商家流水+'
          break
        case 10:
          this.data.typename = '提现转账'
          break
        case 11:
          this.data.typename = '提现退款'
          break
        default:
          this.data.typename = '系统调整'
          break
      }
    },
    backmoneytype (innum) {
      if (innum > 0) {
        this.data.backtypemoney = ' + ' + innum
      } else {
        this.data.backtypemoney = innum
      }
    },
    // 切换日期
    tabChanged (index) {
      if (this.datetimelist && this.datetimelist.length > 0) {
        let item = this.datetimelist[index]
        this.postData.status = item.status
        this.postData.dateti = item.text
        if (item.status === 200) {
          this.postData.dateti = null
        }
        this.initMeScroll()
      }
    },
    // 初始化选项卡状态
    initTab (val) {
      if (this.datetimelist && this.datetimelist.length > 0) {
        // 通过值查询索引
        let index = this.datetimelist.findIndex(i => i.status === val)
        if (index === -1) {
          index = 0
        }
        this.tabChanged(0)
      }
    },
    // 初始化滚动区
    initMeScroll () {
      let self = this
      this.$nextTick(() => {
        if (this.meScroll) {
          this.meScroll.resetUpScroll()
          return
        }
        this.meScroll = new MeScroll('automescroll', {
          up: {
            callback (page) {
              self.loadbackprice(page)
            },
            noMoreSize: 1,
            htmlNodata: '<p class="upwarp-nodata">我是有底线的</p>',
            empty: {
              warpId: `record_noData`,
              tip: '没有更多的数据'
            }
          }
        })
      })
    },
    // 加载返利数据列表
    async loadbackprice (page) {
      this.setLoading({
        status: true,
        opacity: 0
      })
      this.postData.page = page.num
      this.postData.rows = page.size
      let res = await getbackpricerecord(qs.stringify(this.postData))
      this.setLoading(false)
      if (page.num === 1) {
        this.data = res.data
      }
      this.data = [
        ...this.data
      ]
      let hasNext = (this.data.length < res.data.length)
      this.meScroll.endSuccess(res.data.length, hasNext)
      this.backtotal = this.user.user_money
      // for (let i = 0; i < this.data.length; i++) {
      //   this.backtotal = this.backtotal + this.data[i].record_integral_sum
      // }
    },
    getDateTime () {
      var date = new Date()
      var dateY = date.getFullYear()
      var dateM = date.getMonth() + 1
      if (dateM < 10) {
        this.datetimelist[1] = { text: dateY + '-0' + dateM, status: -1 }
      } else {
        this.datetimelist[1] = { text: dateY + '-' + dateM, status: -1 }
      }
      for (let i = 2; i < 7; i++) {
        dateM = dateM - 1
        if (dateM <= 0) {
          dateY = dateY - 1
          dateM = dateM + 12
        }
        if (dateM < 10) {
          dateM = '0' + dateM
        }
        this.datetimelist[i] = { text: dateY + '-' + dateM, status: i }
      }
      this.datetimelist[0] = { text: '查看全部', status: 200 }
    }
  },
  created () {
    // 获取近半年月份
    this.getDateTime()
  },
  activated () {
    // 默认为最近状态
    this.initTab(this.$route.query.tab || -1)
    if (this.isCreate) {
      this.isCreate = false
    } else {
      if (this.meScroll) {
        this.meScroll.resetUpScroll()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/css/pub";
.mescroll {
  position: fixed;
  top: 7.375rem;
  bottom: 1.25rem;
}
.view {
  text-align: center;
  height: auto;
  .header {
    text-align: center;
    width: 100%;
    background-image: url("http://img.zanjl.com/Content/img/image/backprice.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 5rem;
    padding: 5% 0;
    color: white;
    position: relative;
    p {
      padding-top: 0;
    }
    .numberr {
      font-size: 40pt;
      margin-top: 10%;
    }
    .addfont {
      font-size: 9pt;
      img {
        margin-bottom: -.05rem;
      }
    }
  }
  .div {
    margin-top: .125rem;
    background-color: #f7f7f7;
    .panel {
      width: 100%;
      background-color: #fff;
      border-top: .025rem solid #e2e2e2;
      padding-top: .125rem;
      .topup {
        font-weight: bold;
        padding-left: 2%;
        text-align: left;
        color: #000000;
        font-size: 0.4rem;
        .expend {
          color: #0080ff;
          float: right;
        }
        .income {
          color: #fa2c36;
          float: right;
          margin-right: 0.2rem;
        }
      }
      .successup {
        text-align: left;
        color: #666666;
        font-size: 0.3rem;
        width: 100%;
        overflow: hidden;
        white-space: nowrap; // 超出不换行
        text-overflow: ellipsis;
      }
    }
  }
  .flex-demo {
    text-align: left;
    border-radius: .05rem;
    background-clip: padding-box;
    line-height: initial;
  }
  .flex-demo-1 {
    font-size: 0.3rem;
    color: #666666;
  }
  .flex-demo-2 {
    font-size: 0.3rem;
    color: #666666;
    text-align: left;
  }
  .btn {
    width: 100%;
    height: 1.25rem;
    position: absolute;
    bottom: .0625rem;
    text-align: center;
    box-shadow: 0 .0625rem .0875rem 0 rgba(153, 153, 153, 0.15);
    bottom: 0;
    button {
      width: 25%;
      height: .775rem;
      background-color: #d9dade;
      color: #293045;
      border-radius: .125rem;
      border: none;
      margin-top: 2%;
    }
  }
}
</style>
